<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise封装AJAX</title>
</head>

<body>
  <script>
    // 接口地址：https://api.apiopen.top/getJoke

    /* 
      // 1. 创建对象
      const xhr = new XMLHttpRequest();

      // 2. 初始化
      xhr.open("GET", "https://api.apiopen.top/getJoke");

      // 3. 发送
      xhr.send();

      // 4. 绑定事件，处理响应结果
      xhr.onreadystatechange = function() {
        // 判断
        if(xhr.readyState == 4) {
          // 判断响应状态码  200-299
          if(xhr.status >= 200 && xhr.status < 300) {
            // 表示成功
            console.log(xhr.response)
          } else {
            console.err(xhr.status)
          }
        }
      } 
    */

    const p = new Promise((resolve, reject)=> {
      // 1. 创建对象
      const xhr = new XMLHttpRequest();

      // 2. 初始化
      xhr.open("GET", "https://api.apiopen.top/getJoke");

      // 3. 发送
      xhr.send();

      // 4. 绑定事件，处理响应结果
      xhr.onreadystatechange = function() {
        // 判断
        if(xhr.readyState == 4) {
          // 判断响应状态码  200-299
          if(xhr.status >= 200 && xhr.status < 300) {
            // 表示成功
            resolve(xhr.response)
          } else {
            // 表示失败
            reject(xhr.status)
          }
        }
      }
    })

    // 指定回调
    p.then(value => {
      console.log(value);
    }, err => {
      console.log(err)
    })
  </script>
</body>

</html>